<template>
	<view class="container">
		<view class="content-title flex flex-center-align">
			<image src="../../static/icos/hot.png" mode=""></image><text>热门超英</text>
		</view>
		<scroll-view class="scroll-view_H hot" scroll-x="true"  scroll-left="120">
			<view class="content" v-for="(item,index) in dataList" :key="index">
				<view  class="item flex">
					<image :src="item.img" mode=""></image>
					<view class="">
						{{item.title}}
					</view>
					<view class="flex flex-center-align">
						<uni-rate :value="item.score/2" size="14"></uni-rate><text class="score">{{item.score}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import uniRate from '../uni-rate/uni-rate.vue'
	export default {
		components: {uniRate},
		data() {
			return {
				dataList: [
					
				]
			};
		},
		mounted() {
			wx.cloud.callFunction({
			  // 要调用的云函数名称
			  name: 'getCyygHot'
			
			}).then(res => {
				
			 this.dataList = res.result.data
			}).catch(err => {
			  console.log(err)
			})
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
	}

	.content-title {
		height: 80upx;

		image {
			width: 32upx;
			height: 32upx;
			margin: 0 20upx;
		}
		text{
			font-size: 32upx;
		}
	}

	.hot {
		white-space: nowrap;
		width: 100%;
	}

	.content {
		display: inline-block;
		margin-left: 20upx;
	}

	.item {
		flex-direction: column;
		align-items: center;

		image {
			width: 200upx;
			height: 270upx;
			margin-bottom: 5upx;
		}
	}
	.score{
		margin-left: 5upx;
		margin-top: 5upx;
	}
</style>
